<template>
	<view class="bill-manage">
		<view class="balance">
			<view class="available">
				<view class="text">可开金额</view>
				<view class="money">
					<text style="font-size: 28rpx;">￥</text>
					<text style="font-size: 48rpx;">{{ amount || '0.00' }}</text>
				</view>
			</view>
			<view>
				<button class="money-btn" @click="drawBill">开票</button>
			</view>
		</view>
		<view class="invoice">
			<view class="bottom-title">
				<view class="quenstion" :class="active1 ? 'unActive' : 'active-text'" @click="nearList">近期发票</view>
				<view class="use" :class="active1 ? 'active-text' : 'unActive'" @click="allList">已开发票</view>
			</view>
		</view>
		<view v-if="list.length > 0" style="padding-bottom: 100rpx;">
			<view class="bill-list" v-for="(item,index) in list" :key="index" @click="goInvoiceDetail(item)">
				<view class="bill-item">
					<view class="item-company">
						<view class="company-text">{{ item.invoicing_party }}</view>
						<view class="company-state main-color">{{ item.state.text }}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="bill-item">
					<view class="item-company">
						<view class="company-text">票据号码:</view>
						<view class="company-state">{{ item.invoice_no }}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="bill-item">
					<view class="item-company">
						<view class="company-text">票据类型:</view>
						<view class="company-state">{{ item.invoice_type.text }}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="bill-item">
					<view class="item-company">
						<view class="company-text">合计金额:</view>
						<view class="company-state main-color">￥{{ item.total_money }}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="bill-item">
					<view class="item-company">
						<view class="company-text">备注:</view>
						<view class="company-state">{{ item.remarks }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getAmount,
		getDrawList,
		getBillList
	} from '@/api/wallet.js'
	export default {
		data() {
			return {
				active1: false,
				list: [],
				amount: ''
			}
		},
		onShow() {
			// this.nearList();
			this.getTotalAmount();
			this.getNoInvoice();
		},
		onPullDownRefresh(){
			this.list = []
			this.getTotalAmount();
			this.getNoInvoice();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			async getTotalAmount() {
				const money = await getAmount();
				console.log('money', money)
				this.amount = money.data;
			},
			async getNoInvoice() {
				uni.showLoading({
					title: '正在加载中...'
				})
				const list = await getDrawList();
				console.log('list', list);
				const {
					data
				} = list.data;
				uni.hideLoading()
				if (data) {
					this.list = data;
					uni.hideLoading()
				}
			},
			goInvoiceDetail(item) {
				console.log(item);
				const param = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/receiptManage/receipt?param=${param}`
				})
			},
			nearList() {
				this.active1 = false;
				// getBillList().then(res => {
				// 	const { data } = res.data;
				// 	if (data) {
				// 		this.list = data;
				// 	}
				// })
			},
			allList() {
				this.active1 = true;
				this.getNoInvoice();
			},
			// 开票
			drawBill() {
				uni.showModal({
					title: "提示",
					content: "请前往金康云平台开具发票",
					showCancel: false,
					success: res => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bill-manage {
		margin: 20rpx 36rpx;
	}

	.balance {
		background-image: $balance-bg2;
		background-position: 100%;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.text {
			font-size: #{$text-size};
			color: #{$one-title-color};
			margin-bottom: 20rpx;
		}

		.money {
			color: #{$main-color};
		}

		.money-btn {
			background: #{$main-color};
			color: #fff;
			border-radius: 40rpx;
			height: 66rpx;
			line-height: 66rpx;
			font-size: #{$text-size};
		}
	}

	.invoice {
		margin: 40rpx 0;

		.bottom-title {
			margin-bottom: 32upx;
			display: flex;

			.use {
				margin-left: 32upx;
			}
		}
	}

	.active-text {
		font-size: 32upx;
		color: #333;
		font-weight: bold;
		background-image: linear-gradient(0deg, #ff6005, #fff 40%, #fff);
		height: 36upx;
		width: 130upx;
	}

	.unActive {
		color: #999;
		font-size: 32upx;
	}

	.bill-list {
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.bill-item {
		font-size: #{$text-size};
		color: #{$one-title-color};

		.item-company {
			display: flex;
			justify-content: space-between;

			.company-state {
				color: #{$two-title-color};
			}

			.main-color {
				color: #{$main-color};
			}
		}
	}

	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 20rpx 0;
	}
</style>